<template>
  <div class="m-img-pop">
    <mu-popup position="left" popupClass="popup-left" :open="isImagePop" @close="close()">
      <mu-raised-button label="关闭弹框" @click="close()" primary fullWidth/>
      <mu-row class="imgls" gutter>
        <mu-col class="imgbox" v-for="poster,index in posters" key="key" width="50" tablet="30" desktop="30">
          <img :src="poster" @click="showImageView(poster)">
        </mu-col>
      </mu-row>
  
      <div class="imgview">
        <div class="wrap">
          <img :src="imgview">
          <mu-raised-button label="OK" class="btn-confirm" primary @click="confirmPoster" />
        </div>
      </div>
    </mu-popup>
  
  </div>
</template>

<script>
import posters from '../mocks/posters.json'
import placehold from '../assets/images/avatar_placehold.png'
export default {
  data() {
    return {
      posters: posters,
      imgview: placehold
    }
  },
  computed: {
    isImagePop() {
      return this.$store.state.isImagePop;
    }
  },
  methods: {
    open() {
      this.$store.commit("IMAGE_POP_CHANGE", {
        isImagePop: true
      })
    },
    close() {
      this.$store.commit("IMAGE_POP_CHANGE", {
        isImagePop: false
      })
    },
    showImageView(poster) {
      console.log(poster)
      this.imgview = poster
    },
    confirmPoster() {
      if (this.imgview == placehold) {
        this.$store.commit('SNACK_BAR_CHANGE', {
          snackbar: true,
          snackMsg: 'Please choose a poster and then continue'
        })
        return;
      }
      this.$store.commit('POSTER_CHANGE', {
        poster: this.imgview
      })
      this.close('left');

    }
  }
}
</script>

<style lang="scss">
.popup-left {
  width: 30%;
  max-width: 375px;
  height: 100%;
  align-items: center;
  padding: 24px;
}

.mu-popup {
  .imgls {
    margin-top: 10px;
    max-height: 90%;
    overflow-y: auto;
    .imgbox {
      cursor: pointer;
    }
  }
  .imgview {
    display: flex;
    background-color: #fefefe;
    justify-content: center;
    align-items: center;
    position: fixed;
    width: 600px;
    right: -200%;
    height: 90%;
    left: 200%;
    margin-left: -300px;
    top: 50%;
    transform: translate(0, -50%);
    box-shadow: 0px 2px 8px 0px #333;
    .wrap {
      width: 80%;
      height: 60%;
      text-align: center;
    }
    img {
      max-height: 100%;
    }
  }
  .btn-confirm {
    display: block;
    margin: auto;
  }
}
</style>